<template>
  <div id="msglist">
    <div class="head">        
        <div class="back" @click="$router.go(-1)">            
            <mu-icon value="chevron_left"  />
        </div>
        <div class="search" @click="">
            和{{msg}}的聊天      
        </div>
        <div class="flex1"></div>
    </div>

    <ul id="msgbody">
        <li v-show="ldmore" @click="loadMore" id="loadM"><a>点击加载更多</a></li>
    </ul>

    <div class="msgsend">
        <ul>
            <li>
                <input type="text" id="infos" v-model="infos">
            </li>
            <li>
                <a @click="sendInfo">发送</a>
            </li>
        </ul> 
    </div>
    
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    require('../../assets/css/msglist.css');
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    export default {
        name: 'msglist', //组件的名字
        data() {
            return { //数据
                msg: this.$route.query.name,
                ldmore:false,
                receiverId:this.$route.query.stewardId,
                sessionId:'',
                senderId:'',
                //senderId:18,
                infos:'',
                contents:[]
            }
        },
        methods: { //方法
            msgHeight(){
                var mHeight =  document.documentElement.clientHeight - 95 + 'px'
                $('#msgbody').css('height',mHeight)
            },
            msgS(u,f,v,n,t){
                var res = ''
                res += '<li><div class="sender ' + u + '"><div class="mask">'
                res += f + '</div></div>'
                res += '<div class="msgbox ' + v + '"><label class="words">'
                res += '<label class="words">' + n + '</label>'
                res += '<span class="arrow"></span></div></li>'
                //res += '<label class="time-m right">'+ t +'</label>'
                $('#msgbody').append(res)
            },
            msgL(u,f,v,n,t){
                var res = ''
                res += '<li><div class="sender ' + u + '"><div class="mask">'
                res += f + '</div></div>'
                res += '<div class="msgbox ' + v + '"><label class="words">'
                res += '<label class="words">' + n + '</label>'
                res += '<span class="arrow"></span></div></li>'
                //res += '<label class="time-m right">'+ t +'</label>'
                $('#loadM').after(res)
            },
            loadMore(){
                var vm = this
                vm.msgHeight()
                for(var i=0;i<$._loads;i++){
                    var target = vm.contents.pop()
                    if(!target){
                        this.ldmore = false
                        break
                    }else{
                        if(target.senderId == vm.senderId){
                            vm.msgL('me','我','right',target.msg)
                        }else{
                            vm.msgL('other',vm.msg,'left',target.msg)
                        }
                    }
                }
            },
            msgSession(){
                var vm = this
                var wx = JSON.stringify({openId:$.local_Storage.getItem('wxopenid')})
                $.hsf.ajaxPost('user/searchUserByOpenId',wx,'',function(result){
                    if(result.code == '200'){
                        console.log(result)
                        //alert(result.data)
                        if(result.data != null){
                            vm.senderId = result.data.id
                            var obj = {
                                senderId:vm.senderId,
                                receiverId:vm.receiverId
                            }

                            //console.log(obj)
                            var objs = JSON.stringify(obj)
                            //alert(objs)
                            $.hsf.ajaxPost('msg/querySessionId',objs,'',function(result){//查询留言会话编号
                                if(result.code == '200'){
                                    //console.log(result)
                                    vm.sessionId = result.data
                                    var info = {
                                        sessionId:vm.sessionId,
                                        rows:100,
                                        page:1,
                                        startRowNum:'',
                                    }
                                    var infos = JSON.stringify(info)
                                    //console.log(infos)
                                    $.hsf.ajaxPost('msg/pageQueryMsg',infos,'',function(result){//分页查询留言消息
                                        if(result.code == '200'){
                                            //console.log(result.data)
                                            var rows = result.data.rows
                                            if(rows.length > $._default){
                                                vm.ldmore = true
                                                for(var i=rows.length - $._default;i<rows.length;i++){
                                                    if(rows[i].senderId == vm.senderId){
                                                        vm.msgS('me','我','right',rows[i].msg)
                                                    }else{
                                                        vm.msgS('other',vm.msg,'left',rows[i].msg)
                                                    }
                                                }
                                                for(var i=0;i < rows.length - $._default;i++){
                                                   vm.contents.push(rows[i])
                                                }
                                            }else{
                                                for(var i=0;i<rows.length;i++){
                                                    if(rows[i].senderId == vm.senderId){
                                                        vm.msgS('me','我','right',rows[i].msg)
                                                    }else{
                                                        vm.msgS('other',vm.msg,'left',rows[i].msg)
                                                    }
                                                }
                                            }
                                        }
                                    })
                                }
                            })
                        }else{
                            $.UIComfirm('您还未绑定，请先绑定',function(re){
                                if(re == 'yes'){
                                    vm.$router.push({
                                        path:'/mobileBind'
                                    })
                                }else{
                                    vm.$router.go(-1)
                                }
                            })
                        }
                    }
                })
            },
            sendInfo(){
                var vm = this
                var obj = {
                    sessionId:vm.sessionId,
                    msg:vm.infos,
                    senderId:vm.senderId,
                    receiverId:vm.receiverId,
                }
                var objs = JSON.stringify(obj)
                if(vm.infos != '' && vm.infos != null){
                    $.hsf.ajaxPost('msg/sendMsg',objs,'',function(result){
                        if(result.code == '200'){
                            vm.loadMessage()
                            vm.infos = ''
                        }
                    })
                }
            },
            loadMessage(){
                var vm = this
                var time = new Date()
                var hh = time.getHours()
                var mm = time.getMinutes()
                var t = ''
                if(hh<10){
                    t += '0'
                }
                t += hh + ':'
                if(mm<10){
                    t += '0'
                }
                t += mm
                vm.msgS('me','我','right',vm.infos)
            }
        },
        computed: { //计算 用来引入vuex里面state

        },
        mounted: function() { //组件加载完成
            var vm = this
            this.msgHeight()
            this.msgSession()
            window.onresize = function(){
                vm.msgHeight()
            }
        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件

        },
        components: {

        }
    }
</script>
<style scoped lang="scss">
    .head {
        display: flex;
        height: 48px;
        line-height: 48px;
        background: #333;
        .back {
            flex: 1;
            text-align: center;
            color: #fff;
            line-height: 64px;
        }
        .search {
            flex: 5;
            position: relative;
            text-align: center;
            color: #fff;
            font-size: 18px;
        }
        .email {
            flex: 1;
            line-height: 64px;
            text-align: center;
            color: #fff;
        }
    }
    
    #msglist {
        text-align: center;
    }
</style>